<template>
  <div class="soundPlayer" :class="{'full':ifFull}">
      <div class="cover" :class="{'hide':ifStart}" :style="{backgroundImage:'url(https://static.missevan.com/mosaic/'+sound.cover_image+')',display:'block'}">
          <div class="record-disk">
              <div class="disk-cover" :style="{backgroundImage:'url('+sound.front_cover+')'}"></div>
          </div>
      </div>
      <div v-if="ifStart&&ifAudio" class="pic" :style="{backgroundImage:'url('+showPic+')'}"></div>
      <video class="myVideo" preload="auto" playsinline v-if="!ifAudio" ref="video" @canplay="handelCanPlay" @timeupdate="handelTimeUpDate">
          <source :src="url" type="video/mp4">
      </video>
      <audio v-else :src="url" ref="audio" preload="auto" @canplay="handelCanPlay" @timeupdate="handelTimeUpDate"></audio>
      <div class="danmu-box"   @click="showDanmuMenu">
          <div class="danmu"></div>
      </div>
      <div class="contorller" :class="{'up':ifShowMenu}">
          <div class="play-icon play" :class="{'puse':ifPlay}" @click="play"></div>
      </div>
      <div class="danmu-send">
          <div class="danmu-cont" :class="{'down':!ifShowMenu,'ifVideo':!ifAudio}" >
              <form class="danmu-form" >
                  <input class="danmu-text" type="text" placeholder="来点弹幕啊~">
                  <input type="button" class="send" value="发送">
              </form>
              <button class="ifshow-danmu" :class="{'no-show':ifShowDanmu}" @click="showDanmu"></button>
              <button class="ifFullScreen" v-if="!ifAudio" @click="showFull"></button>
          </div>
      </div>
      <div class="progress-bar" @click="goTime" ref="progressBar" @touchmove="moveTime">
          <div class="loaded" :style="{width:loadedWidth}"></div>
          <div class="played" :style="{width:playedWidth}">
              <div class="play-btn" ref='playBtn'></div>
          </div>
      </div>
      <div class="time">
          <span class="played-time">{{nowTime | timeFilter}}</span>
          <span class="all-time">{{maxTime | timeFilter}}</span>
      </div>
  </div>
</template>

<script>
import bus from "assets/playerBus"
export default {
    props:['sound','imgList'],
    data(){
        return {
            url:"",
            ifAudio:true,
            type:'audio',
            ifPlay:false,
            ifStart:false,
            ifShowMenu:false,
            ifShowDanmu:true,
            ifFull:false,
            showPic:'',
            maxTime:0,
            nowTime:0.00,
            cacheTime:0.00,
            playedWidth:'0%',
            loadedWidth:'0%'
        }
    },
    mounted(){
        let mp3="https://static.missevan.com/"+this.sound.soundurl_64
        this.url = mp3;
        bus.$on('changeType',(msg)=>{
            this.ifAudio=msg.isAudio
            this.ifPlay=false
            this.nowTime=0
            this.ifStart=false
            this.playedWidth='0%'
        })
    },
    methods:{
        moveTime(e){
            this.playedWidth=Math.round(e.touches[0].pageX/this.$refs.progressBar.offsetWidth * 100)+ "%"
            this.$refs[this.type].currentTime=Math.round(e.touches[0].pageX/this.$refs.progressBar.offsetWidth*this.maxTime*100)/100
        },
        goTime(e){
            if(e.target!==this.$refs.playBtn){
                this.$refs[this.type].currentTime=Math.round(e.offsetX/this.$refs.progressBar.offsetWidth*this.maxTime*100)/100
            }
        },
        play(){
            this.ifPlay=!this.ifPlay
        },
        handelCanPlay(){
            this.maxTime=this.$refs[this.type].duration
            let timer=setInterval(()=>{
                if(this.$refs[this.type]!=undefined&&this.$refs[this.type].readyState&&this.$refs[this.type].readyState===4){
                    let timeRanges=this.$refs[this.type].buffered
                    this.cacheTime=(timeRanges.length>= 1?timeRanges.end(timeRanges.length - 1):0)/this.maxTime
                    this.loadedWidth=Math.round(this.cacheTime * 100)+ "%"
                }
                if(this.loadedWidth=='100%'){
                    clearInterval(timer)            
                }
            },1000)
        },
        handelTimeUpDate(){
            this.nowTime=this.$refs[this.type]!=undefined?this.$refs[this.type].currentTime:0
            this.playedWidth=Math.round(this.nowTime/this.maxTime * 100)+ "%"
            if(this.ifAudio&&this.imgList&&this.imgList.length>0){
                let item=this.imgList.find((value)=>{
                    return Math.round(~~value.stime)>=Math.round(this.nowTime)
                })
                if(item){
                    this.showPic=item.original_cover
                }
            }
            if(this.playedWidth=='100%'){
                this.play();
            }
        },
        showDanmuMenu(){
            this.ifShowMenu=!this.ifShowMenu
        },
        showDanmu(){
            this.ifShowDanmu=!this.ifShowDanmu
        },
        showFull(){
            this.ifFull=!this.ifFull
        }
    },
    watch:{
        ifPlay(value){
            if(value){
                this.$refs[this.type].play()
            }else{
                this.$refs[this.type].pause()
            }
        },
        ifAudio(value){
            if(value){
                this.type='audio'
                this.url="https://static.missevan.com/"+this.sound.soundurl_64
            }else{
                this.type='video'
                this.url=this.sound.videourl
            }
        },
        nowTime(value){
            if(value!==0&&!this.ifAudio||(this.ifAudio&&this.imgList&&this.imgList.length>0&&this.showPic!='')){
                this.ifStart=true
            }else{
                this.ifStart=false
                //this.playedWidth='0%'
            }
        }
    },
    filters:{
        timeFilter(value){
            let m=new Date(value*1000)
            return m.getMinutes()+":"+(m.getSeconds()<10?'0'+m.getSeconds():m.getSeconds())
        }
    }
}
</script>

<style lang="stylus" scoped>
.soundPlayer
    height 3.25rem
    position relative

    .cover,.pic
        display block
        width 100%
        height 3.25rem
        overflow hidden
        position absolute
        top 0
        background-repeat no-repeat
        background-position 50%
        background-size cover
        z-index 0
        &.hide
            display none !important
        .record-disk
            position absolute
            z-index 1
            top .3rem
            left 0
            right 0
            height 2.2rem
            text-align center
            .disk-cover
                width 2.2rem
                height 2.2rem
                margin 0 auto 
                border-radius 50%
                border 1px solid rgba(0,0,0,0.3)
                overflow hidden
                background-size cover
                background-position 50%
                background-repeat no-repeat
    .pic
        background-size contain
    .myVideo
        visibility visible
        width 100%
        height 100%
    &.full
        position fixed
        top 0
        bottom 0
        right 0
        left 0
        height 100%
        z-index 995
        background-color #000
    .danmu-box
        position absolute
        top 0
        width 100%
        height 3.25rem
        transition height .3s
        .danmu
            position absolute
            z-index 3
            top 0
            width 100%
            height 3.25rem
            text-align center
            overflow hidden
    .contorller
        position absolute
        z-index 5
        right .1rem
        bottom .2rem
        width .48rem
        height .3rem
        background-color hsla(0,0%,84%,.4)
        box-shadow 0 0 5px 0 rgba(0,0,0,.4)
        border-radius .08rem
        cursor pointer
        text-align center
        transition bottom .5s ease
        &.up
            bottom .6rem
        .play-icon
            margin-left .01rem
            background-position -0.75rem 0
            display inline-block
            width 0.28rem
            height 0.28rem
            margin-top  0.01rem
            background-repeat no-repeat
        .play
            background-image url('https://static.missevan.com/assets/m/images/build/sprite-icons-sound@2x.8414b2aa.png')
            background-size 1.2rem 1.02rem
        .puse
            background-position -0.75rem -0.3rem
    .danmu-send
        width 100%
        height .56rem
        overflow hidden
        position absolute
        z-index 4
        right 0
        bottom 0
        .danmu-cont
            width 100%
            height 100%
            padding .12rem .1rem
            background #3d3d3d
            position absolute
            bottom 0
            transition bottom .5s ease
            display flex 
            justify-content space-between
            &.down
                bottom -.6rem
            
            .danmu-form
                width calc(100% - 0.38rem)
                position relative
                display flex
               
                &:before
                    content ""
                    height .19rem
                    border-right 0.01rem solid #bdbdbd
                    position absolute
                    top 0.05rem
                    right 0.45rem
                .danmu-text
                    display block
                    width calc(100% - 0.45rem)
                    height .28rem
                    border none 
                    font-size .13rem
                    border-radius 0.04rem 0 0 0.04rem
                    padding .06rem .1rem
                    padding-left .08rem
                    color #bdbdbd
                    background #757575
                    &::placeholder
                        color #bdbdbd
                .send
                    width .45rem
                    height .28rem
                    padding .06rem .11rem
                    background #757575
                    border none
                    border-radius 0 0.04rem 0.04rem 0
                    font-size .12rem
                    color #bdbdbd
            button
                width .28rem
                height .28rem
                position absolute
                right .1rem
                border none 
                border-radius .04rem
                background #5d5d5d
                color #bdbdbd
                font-size .12rem
                background-image url('https://static.missevan.com/assets/m/images/build/sprite-icons-sound@2x.8414b2aa.png')
                background-size 1.2rem 1.02rem
                &.ifshow-danmu
                    background-position -0.3rem -0.44rem
                    &.no-show
                        background-position 0 -0.44rem
                &.ifFullScreen
                    background-position 0 -0.74rem
            &.ifVideo
                .danmu-form
                    width calc(100% - 0.78rem)
                .ifshow-danmu
                    right 0.48rem !important

    .progress-bar
        width 100%
        position absolute
        bottom -1px
        height .04rem
        z-index 4
        padding 0.01rem 0
        &:after
            content ""
            display block
            position absolute
            left 0
            top 0.01rem
            right 0
            bottom 0.01rem
            z-index -1
            background #d6d6d6
        .loaded
            width 0%
            background-color #b2b2b2
            position absolute
            top 0.01rem
            left 0
            height 0.02rem
        .played
            background #e63c3c
            position absolute
            top 0.01rem
            left 0
            height 0.02rem
            width 0%
            .play-btn
                width .16rem
                height .16rem
                position absolute
                top -0.07rem
                right -0.07rem
                border-radius 50%
                cursor pointer
                border .04rem solid rgba(0,0,0,.3)
                &:before
                    content ""
                    position absolute
                    width 0.08rem
                    height 0.08rem
                    background #fff
                    border-radius 50%
    .time
        position absolute
        bottom -0.14rem
        width 100%
        font-size 0.09rem
        height .14rem
        color #a6a6a6
        padding 0.01rem 0.05rem
        display flex 
        justify-content space-between
        align-items center
</style>